<!-- 图像识别 -->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度动物图像识别</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='front/css/image_detect.css') }}">
      <style>
        body {
          background-image: url('{{ url_for('static', filename='common/images/animal-base.jpg') }}');
          background-size: cover; /* 让背景图片覆盖整个页面 */
          background-position: center; /* 让背景图片居中 */
          background-repeat: no-repeat; /* 防止背景图片重复 */
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>动植物图像识别(百度)</h1>
        <form method="post" enctype="multipart/form-data" action="{{ url_for('image.image_detect') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <!-- 需要添加这一个，否则会报错 400 -->
            <input type="file" name="image" accept="image/*">
            <button type="submit">上传识别</button>
        </form>
        {% if animals %}
        <div class="result">
            <h2>识别结果</h2>
            <ul>
                {% for animal in animals %}
                <li>名称: <a href="{{ url_for('front.search_image',species_name=animal.name) }}">{{ animal.name }}</a>, 置信度: {{ animal.score }}</li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</body>

</html>
